<template>
  <!--通过变量classObj控制整个类名属性-->
  <div v-bind:class="classObj">我是尼克陈</div>
  <!--单击事件，改变isRed变量的值-->
  <button @click="change">变红</button>
</template>
<script>
//引入计算属性computed
import {reactive, computed} from 'vue'
export default{
  setup(){
    const state=reactive({
      isRed:false//变量声明
    })
    //通过计算属性生成classObj对象，
    //当computed回调函数内部的state属性发生变化时，就会触发computed的执行
    const classObj = computed(() => {
      return {
        red: state.isRed
      }
    })
    //控制isRed变量的方法
    const change = () => {
      state.isRed = true
    }
    //返回classObj对象给模板使用
    return {classObj, change}
  }
}
</script>
<style scoped>
  .red{
    color: red
  }
</style>